<template>
    <div class="synopsis-content">
      <!-- 轮播图 -->
      <div>
        <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
          <swiper-slide
            class="swiper-slide swiper-container-3d"
            v-for="(banner, index) in bannerList"
            :key="index"
            style="
              position: relative;
              overflow: hidden;
              width: 100%;
              height: 260px;
            "
          >
            <img
              :src="banner.img"
              style="
                position: absolute;
                top: 0;
                left: 50%;
                width: 1920px;
                height: 260px;
                margin-left: -960px;
              "
            />
          </swiper-slide>
        </swiper>
      </div>
      <div class="sy-body w1280">
        <!-- 面包屑 -->
        <div style="display: flex; align-items: center; margin: 18px">
          <img src="../../assets/home.png" alt="" />
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/ApplicationMember' }"
              >会员服务</el-breadcrumb-item
            >
            <el-breadcrumb-item>入会申请</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content-body">
          <!-- 菜单栏 -->
          <div class="menu-box">
            <div class="menu-title">
              <img src="../../assets/icon.png" alt="" />
              <span>会员服务</span>
            </div>
            <div class="menu-item">
              <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#FFFFFF"
                text-color="#666666"
                active-text-color="#0056A2"
                router
                :default-active="this.$router.path"
              >
                <el-menu-item index="/ApplicationMember">
                  <img
                    src="../../assets/right-select.png"
                    style="margin-right: 19px"
                    alt=""
                  />
                  <span slot="title">入会申请</span>
                </el-menu-item>
                <el-menu-item index="/ResourceDonwload">
                  <img
                    src="../../assets/right-none.png"
                    style="margin-right: 19px"
                    alt=""
                  />
                  <span slot="title">资料下载</span>
                </el-menu-item>
                <el-menu-item index="/">
                  <img
                    src="../../assets/right-none.png"
                    style="margin-right: 19px"
                    alt=""
                  />
                  <span slot="title">培训服务</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <!-- 内容栏 -->
          <div class="content-box">
            <div class="content-title">入会申请</div>
            <el-divider></el-divider>
            <div>
             <img src="../../assets/process.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "ApplicationMember",
    data() {
      return {
        //   轮播图配置参数
        swiperOption: {
          loop: true, //是否循环轮播
          speed: 1000, //切换速度
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          //自动轮播
          autoplay: {
            delay: 2000,
  
            disableOnInteraction: false,
          },
        },
        bannerList: [
          {
            img: require("../../assets/banner1.png"),
          },
        ],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  };
  </script>
  
  <style scoped>
  .synopsis-content {
    background-color: rgb(246, 246, 246);
  }
  .sy-body {
    /* margin-top: 18px; */
  }
  
  .content-body {
    background-color: #fff;
    padding: 30px;
    display: flex;
    margin-bottom: 50px;
  }
  
  .content-body .menu-box {
    /* border: 1px solid #dcdadd; */
    flex: 1;
    border-radius: 5px;
    margin-right: 40px;
  }
  
  .content-body .content-box {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .content-body .content-box .content-title {
    font-size: 28px;
    font-family: Microsoft YaHei;
  }
  
  .menu-title {
    background-color: #0056a2;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    padding: 24px 12px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .menu-title span {
    margin-left: 12px;
  }
  
  .menu-item {
    border: 1px solid #dcdadd;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .el-dropdown-menu__item,
  .el-menu-item {
    font-size: 16px;
  }
  </style>